<template>
	<view class="container">
		<!-- <uni-card :is-shadow="false" is-full>
			<text class="uni-h6"></text>
		</uni-card> -->
		<!-- <uni-section title="" type="line"> -->
		<view class="example">
			<!-- <view style="text-align: right;margin-bottom: 12px;" >
					<text>使用说明</text>
				</view> -->
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" @reset="formReset" :rules="rules" :model="baseFormData">

				<uni-forms-item label="公式" required name="skills">
					<uni-data-select v-model="baseFormData.skills" :localdata="skillsRange">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="长(cm)" required name="datalength">
					<uni-easyinput type="digit" v-model="baseFormData.datalength" maxlength="9" placeholder="长" />
				</uni-forms-item>
				<uni-forms-item label="宽(cm)" required name="datawidth">
					<uni-easyinput type="digit" v-model="baseFormData.datawidth" maxlength="9" placeholder="宽" />
				</uni-forms-item>
				<uni-forms-item label="高(cm)" required name="dataheight">
					<uni-easyinput type="digit" v-model="baseFormData.dataheight" maxlength="9" placeholder="高" />
				</uni-forms-item>
				<uni-forms-item label="单位" required name="units">
					<uni-data-select v-model="baseFormData.units" :localdata="unitsRange">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="来价" required name="price">
					<uni-easyinput type="digit" v-model="baseFormData.price" maxlength="9" placeholder="纸板来价" />
				</uni-forms-item>
				<!--  -->
				<uni-forms-item label="利润率">
					<view style="display: flex;">
						<button class="mini-btn" type="primary" size="mini"
							style="float: left;line-height: 286%;">{{ baseFormData.values }}</button>
						<uni-easyinput type="digit" v-model="baseFormData.rate" maxlength="9" placeholder="利润率 = ( 1 ＋ 输入值/100 )"
							style="width: 77%; float: left;margin-left: 5%;" required />
					</view>
				</uni-forms-item>
				<view class="uni-common-mt" v-show="isHidden">
					<uni-forms-item label="价格" style="font-weight: 800;height: 36px;line-height: 36px;">
						<!-- <text style="wi;text-align: center;line-height: 100%;">{{baseFormData.sumprice}}</text> -->
						<!-- <uni-easyinput type="text" v-model="baseFormData.sumprice"/> -->
						<text class="content">{{baseFormData.sumprice}}</text>
					</uni-forms-item>
					<uni-forms-item v-show="isHiddenht" label="纸度" style="font-weight: 800;height: 36px;line-height: 36px">
						<text class="content">{{baseFormData.sumheight}}</text>
					</uni-forms-item>
					<uni-forms-item v-show="isHiddenlen" label="纸长" style="font-weight: 800;height: 36px;line-height: 36px">
						<text class="content">{{baseFormData.sumwidth}}</text>
					</uni-forms-item>
				</view>
				<uni-forms-item style="display: flex;">
					<view style="width: 100%;display: flex;justify-content: space-between;">
						<button type="default" form-type="reset" class="btn-clear" @click="reset">清空</button>
						<button type="primary" class="btn-calc" @click="submit('baseForm')">计算</button>
					</view>
				</uni-forms-item>
				<uni-forms-item v-show="isHiddenbtn">
					<button type="default" plain="true" @click="submits('baseForm')" class="btn-add">添加公式</button>
				</uni-forms-item>
			</uni-forms>
			<view style="text-align: center;" v-show="textShow" @click="createQuote">
				保存报价单
			</view>

		</view>
		<!-- </uni-section> -->
	</view>
</template>

<script>
	import * as util from '../../common/util.js';
	import * as math from 'mathjs'
	export default {
		data() {
			return {
				// 校验规则
				rules: {
					skills: {
						rules: [{
							required: true,
							errorMessage: '请选择一个公式'
						}]
					},
					units: {
						rules: [{
							required: true,
							errorMessage: '请选择单位'
						}]
					},
					datalength: {
						rules: [{
							required: true,
							errorMessage: '长度不能为空'
						}, {
							format: 'number',
							errorMessage: '长度只能输入数字'
						}]
					},
					datawidth: {
						rules: [{
							required: true,
							errorMessage: '宽度不能为空'
						}, {
							format: 'number',
							errorMessage: '宽度只能输入数字'
						}]
					},
					dataheight: {
						rules: [{
							required: true,
							errorMessage: '高度不能为空'
						}, {
							format: 'number',
							errorMessage: '高度只能输入数字'
						}]
					},
					price: {
						rules: [{
							required: true,
							errorMessage: '纸板来价不能为空'
						}, {
							format: 'number',
							errorMessage: '纸板来价只能输入数字'
						}]
					}
				},

				// 基础表单数据
				baseFormData: {
					datalength: '',
					datawidth: '',
					dataheight: '',
					rate: '',
					hobby: [5],
					datetimesingle: 1627529992399,
					price: '',
					skills: '',
					units: 2,
					values: "乘",
					sumprice: '',
					sumheight: '',
					sumwidth: '',
				},
				isHiddenbtn: true,
				isHiddenlen: false,
				isHiddenht: false,
				isHidden: false,
				textShow: false,

				skillsRange: [],
				unitsRange: [{
						value: 1,
						text: "毫米",
					},
					{
						value: 2,
						text: "厘米"
					},
					{
						value: 3,
						text: "英寸"
					},
				],

				newformulaArr: [],
				newformula_lenArr: [],
				newformula_degreeArr: [],
			}
		},

		computed: {
			// 处理表单排列切换
			alignment() {
				if (this.current === 0) return 'left'
				if (this.current === 1) return 'top'
				return 'left'
			}
		},
		onLoad() {
			console.log("看见我onload");
			let userInfo = uni.getStorageSync('userInfo');
			if (!userInfo) {
				uni.showToast({
					title: '登录失效,重新登录', //标题 必填
					icon: 'none', //图标
					mask: false, //是否显示透明蒙层，防止触摸穿透，默认：false
					duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
				});
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 2000);
			}
			let formula = uni.getStorageSync('formula');
			userInfo = JSON.parse(userInfo);
			formula = JSON.parse(formula);
			formula.sort(function(a, b) {
				// 比较A值
				if (a.is_top != b.is_top) {
					return a.is_top > b.is_top ? -1 : 1;
					// return b.is_top - a.is_top;
				}
				// // 如果A值相同，比较B值
				// return b.updated_at - a.updated_at;
				return a.updated_at > b.updated_at ? -1 : 1;
			});
			console.log(formula);
			let newformula = [];
			let a = [];
			let newformula_lenArr = [];
			let newformula_degreeArr = [];
			formula.forEach((i, index) => {
				let formulaArr = [];
				let keys = i.private_formula_id.toString();
				formulaArr.value = i.private_formula_id;
				formulaArr.formula = i.formula;

				formulaArr.text = i.name;
				newformula.push(formulaArr);
				a[keys] = i.formula;
				newformula_lenArr[keys] = i.formula_len;
				newformula_degreeArr[keys] = i.formula_degree;
			})
			this.newformulaArr = a;
			this.newformula_lenArr = newformula_lenArr;
			this.newformula_degreeArr = newformula_degreeArr;
			this.skillsRange = newformula;
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			// this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			reset() {
				this.baseFormData = {
					datalength: '',
					datawidth: '',
					dataheight: '',
					rate: '',
					hobby: [5],
					datetimesingle: 1627529992399,
					price: '',
					units: 2,
					values: "乘",
					sumprice: '',
					sumheight: '',
					sumwidth: '',
				};
				this.isHidden = false;
				this.isHiddenbtn = true;
				this.textShow = false;
			},
			onNavigateTo(id) {
				window.location.reload();
			},
			formReset: function(e) {},
			createQuote() {
				let params = {
					quotation_id: 0,
					formula: this.skillsRange.find(e => e.value == this.baseFormData.skills).formula,
					formula_len: this.baseFormData.sumwidth,
					formula_degree: this.baseFormData.sumheight,
					length: this.baseFormData.datalength,
					width: this.baseFormData.datawidth,
					height: this.baseFormData.dataheight,
					price: this.baseFormData.price,
					profit: this.baseFormData.rate,
					unit: this.baseFormData.units,
					total_price: this.baseFormData.sumprice
				}
				params = encodeURIComponent(JSON.stringify(params))
				console.log(params);
				uni.navigateTo({
					url: `/pages/userModule/quotedDetail/quotedDetail?add=yes&params=${params}`
				})
			},
			// 选择
			checkSex: function(e) {
				this.sexIndex = e.currentTarget.dataset.index;
			},
			changeSwitch(e) {
				if (this.baseFormData.values == "乘") {
					console.log(this.baseFormData.values);
					this.baseFormData.values = "除";
				} else if (this.baseFormData.values == "除") {
					console.log(this.baseFormData.values);
					this.baseFormData.values = "乘";
				}
			},
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},
			add() {
				this.dynamicFormData.domains.push({
					label: '域名',
					value: '',
					rules: [{
						'required': true,
						errorMessage: '域名项必填'
					}],
					id: Date.now()
				})
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},

			submit(ref) {
				this.$refs[ref].validate().then(res => {
					//
					var formulastr = this.newformulaArr[this.baseFormData.skills];
					var newformula_lenstr = this.newformula_lenArr[this.baseFormData.skills];
					var newformula_degreestr = this.newformula_degreeArr[this.baseFormData.skills];
					var units = this.baseFormData.units; //单位
					var length = this.baseFormData.datalength;
					var width = this.baseFormData.datawidth;
					var height = this.baseFormData.dataheight;
					var rate = this.baseFormData.rate;

					var price = this.baseFormData.price;
					var newstr = formulastr.replace(/ /g, "");
					// var newstr = newstr.replace(/\//g,"÷");
					var newstr = newstr.replace(/length/g, length);
					var newstr = newstr.replace(/width/g, width);
					var newstr = newstr.replace(/height/g, height);
					// var newstr = newstr.replace(/profit/g,newrate);
					var newstr = newstr.replace(/price/g, price);
					// var newstr = newstr.replace(/\*/g,"×");

					// console.log(newstr);return;
					// var checkstr = util.validatedFunc(newstr);

					// if(checkstr != true){
					// 	uni.showToast({
					// 		title: checkstr,//标题 必填
					// 		icon: 'none',//图标
					// 		mask: false,//是否显示透明蒙层，防止触摸穿透，默认：false
					// 		duration: 3000,//提示的延迟时间，单位毫秒，默认：1500
					// 	});
					// 	return
					// }
					try {
						var sep2 = math.evaluate(newstr);
					} catch (e) {
						uni.showToast({
							title: e.message, //标题 必填
							icon: 'none', //图标
							mask: false, //是否显示透明蒙层，防止触摸穿透，默认：false
							duration: 3000, //提示的延迟时间，单位毫秒，默认：1500
						});
						return;
					}
					if (rate != '' && rate > 0) {
						var newResult = sep2 * (1 + rate / 100);
						this.baseFormData.sumprice = newResult.toFixed(2);
					} else {
						this.baseFormData.sumprice = sep2.toFixed(2);
					}

					// 
					if (newformula_lenstr == '') {
						this.isHiddenlen = false;
						this.baseFormData.sumheight = '';
					} else {
						var newstrlen = newformula_lenstr.replace(/ /g, "");
						// var newstrlen = newstrlen.replace(/\//g,"÷");
						var newstrlen = newstrlen.replace(/length/g, length);
						var newstrlen = newstrlen.replace(/width/g, width);
						var newstrlen = newstrlen.replace(/height/g, height);
						// var newstrlen = newstrlen.replace(/profit/g,newrate);
						var newstrlen = newstrlen.replace(/price/g, price);
						// var newstrlen = newstrlen.replace(/\*/g,"×");

						// var checkstrlen = util.validatedFunc(newstrlen);

						// if(checkstr != true){
						// 	uni.showToast({
						// 		title: checkstr,//标题 必填
						// 		icon: 'none',//图标
						// 		mask: false,//是否显示透明蒙层，防止触摸穿透，默认：false
						// 		duration: 3000,//提示的延迟时间，单位毫秒，默认：1500
						// 	});
						// 	return
						// }

						try {
							var seplen2 = math.evaluate(newstrlen);
						} catch (e) {
							uni.showToast({
								title: e.message, //标题 必填
								icon: 'none', //图标
								mask: false, //是否显示透明蒙层，防止触摸穿透，默认：false
								duration: 3000, //提示的延迟时间，单位毫秒，默认：1500
							});
							return;
						}

						var utilsname = '厘米';
						if (units == 3) {
							seplen2 = seplen2 / 2.54; //英寸
							seplen2 = seplen2.toFixed(2)
							utilsname = '英寸';
						} else if (units == 1) {
							seplen2 = seplen2 * 10; //毫米
							utilsname = '毫米';
						}
						if (newformula_lenstr != '') {
							this.isHiddenlen = true;
						}
						this.baseFormData.sumwidth = seplen2 + utilsname;
					}

					if (newformula_degreestr == '') {
						this.isHiddenht = false;
						this.baseFormData.sumheight = '';
					} else {

						var newstrdegree = newformula_degreestr.replace(/ /g, "");

						// var newstrdegree = newstrdegree.replace(/\//g,"÷");
						var newstrdegree = newstrdegree.replace(/length/g, length);
						var newstrdegree = newstrdegree.replace(/width/g, width);
						var newstrdegree = newstrdegree.replace(/height/g, height);
						// var newstrdegree = newstrdegree.replace(/profit/g,newrate);
						var newstrdegree = newstrdegree.replace(/price/g, price);
						// var newstrdegree = newstrdegree.replace(/\*/g,"×");
						// var newformula_degreestr
						// var checkstrnewstrdegree = util.validatedFunc(newstrdegree);

						// if(checkstrnewstrdegree != true){
						// 	uni.showToast({
						// 		title: checkstrnewstrdegree,//标题 必填
						// 		icon: 'none',//图标
						// 		mask: false,//是否显示透明蒙层，防止触摸穿透，默认：false
						// 		duration: 3000,//提示的延迟时间，单位毫秒，默认：1500
						// 	});
						// 	return
						// }

						try {
							var sepnewstrdegree2 = math.evaluate(newstrdegree);
							console.log(sepnewstrdegree2);
						} catch (e) {
							uni.showToast({
								title: '运算失败', //标题 必填
								icon: 'none', //图标
								mask: false, //是否显示透明蒙层，防止触摸穿透，默认：false
								duration: 3000, //提示的延迟时间，单位毫秒，默认：1500
							});
							return
						}
						var utilsnames = '厘米';

						if (units == 3) {
							sepnewstrdegree2 = sepnewstrdegree2 / 2.54; //英寸
							sepnewstrdegree2 = sepnewstrdegree2.toFixed(2)
							utilsnames = '英寸';
						} else if (units == 1) {
							sepnewstrdegree2 = sepnewstrdegree2 * 10; //毫米
							utilsnames = '毫米';
						}
						this.baseFormData.sumheight = sepnewstrdegree2 + utilsnames;

						this.isHiddenht = true;
					}
					this.isHidden = true;

					this.isHiddenbtn = false;
					this.textShow = true;
				}).catch(err => {
					return false;
				})
			},
			mounted() {
				console.log("监听到返回事件1");
				// window.location.reload();
				// 监听返回事件并刷新页面
				uni.$on('indexloading', this.onNavigateTo)
			},
			beforeDestroy() {
				// 移除返回事件
				uni.$off('indexloading', this.onNavigateTo)
			},
			submits(res) {
				uni.navigateTo({
					url: '/pages/index/addformula'
				})
			},

		}
	}
</script>

<style lang="scss">
	.btn-clear {
		margin: 0;
		// width: 300rpx;
		flex: 1;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(311deg, #FDA546 0%, #F5C057 100%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
	}

	.btn-calc {
		margin: 0;
		// width: 300rpx;
		flex: 1;
		margin-left: 22rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(313deg, #116BFF 0%, #4289FF 100%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
	}

	.btn-add {
		// width: 622rpx;
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(135deg, #86E3AD 0%, #28BA79 100%);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		border: none !important;
	}


	text {
		color: #0A8DE7;
		text-decoration: underline;
	}

	text:hover {
		color: #0A8DE7;
	}

	.example {
		box-sizing: border-box;
		padding: 32rpx;
		background-color: #fff;
	}

	.content {
		font-size: 17px;
		text-decoration: none;
		box-sizing: border-box;
		height: 30px;
		line-height: 30px;
		margin-top: 5px;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}

	//
	.sex_wapper {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #EFEFEF;
	}

	.sex_wapper .flex1 {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
	}

	.sex_wapper .sex {
		display: inline-block;
	}

	.sex_wapper .flex1.boy .sex {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
		overflow: hidden;
		background: url() no-repeat center/cover;
	}

	.sex_wapper .flex1.boy.active .sex {
		background: url() no-repeat center/cover;
	}

	.sex_wapper .flex1.girls .sex {
		width: 94rpx;
		height: 94rpx;
		border-radius: 50%;
		overflow: hidden;
		background: url() no-repeat center/cover;
	}

	.sex_wapper .flex1.girls.active .sex {
		background: url() no-repeat center/cover;
	}

	.sex_wapper .flex1.active .txt {
		font-size: 28rpx;
		color: #29d19e;
	}
</style>